<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="modules/element-ui/lib/theme-chalk/index.css">
  <script src="modules/vue/dist/vue.min.js"></script>
  <script src="modules/axios/dist/axios.min.js"></script>
  <script src="modules/element-ui/lib/index.js"></script>

</head>

<body>
  <div id="app">
    <el-form :inline="true" class="demo-form-inline" style="text-align: center;">
      <el-form-item label="关键字">
        <el-input v-model="str" placeholder="关键字" style="width: 700px;" autofocus="true" ref="jujiao" @change="chgo"
          @input="ingo" />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="fetchData()">
        查询
      </el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <el-card class="box-card" v-for="(item, index) in list" :key="item.id" style="margin-top: 15px;">
      <div slot="header" class="clearfix">
        <span>{{ (page - 1) * limit + index + 1 + ' 、' + item.topic }}</span>
      </div>
      <div class="text item">
        <div v-if="item.optionsC == null">
          <el-row>
            <el-col :span="24" v-if="'A' == item.answer">
              <div style="color:#303133;">
                {{ 'A：' + item.optionsA }}
              </div>
            </el-col>
            <el-col :span="24" v-else>
              <div style="color:#C0C4CC; text-decoration: line-through;">
                {{ 'A：' + item.optionsA }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" v-if="'B' == item.answer">
              <div style="color:#303133;">{{ 'B：' + item.optionsB }}</div>
            </el-col>
            <el-col :span="24" v-else>
              <div style="color:#C0C4CC;  text-decoration: line-through;">
                {{ 'B：' + item.optionsB }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="btm">
              <el-tag type="success">{{ '正确答案：' + item.answer }}</el-tag>
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <el-row>
            <el-col :span="24" v-if="'A' == item.answer">
              <div style="color:#303133;">
                {{ 'A：' + item.optionsA }}
              </div>
            </el-col>
            <el-col :span="24" v-else>
              <div style="color:#C0C4CC; text-decoration: line-through;">
                {{ 'A：' + item.optionsA }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" v-if="'B' == item.answer">
              <div style="color:#303133;">{{ 'B：' + item.optionsB }}</div>
            </el-col>
            <el-col :span="24" v-else>
              <div style="color:#C0C4CC;  text-decoration: line-through;">
                {{ 'B：' + item.optionsB }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" v-if="'C' == item.answer">
              <div style="color:#303133;">{{ 'C：' + item.optionsC }}</div>
            </el-col>
            <el-col :span="24" v-else>
              <div style="color:#C0C4CC;  text-decoration: line-through;">
                {{ 'C：' + item.optionsC }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" v-if="'D' == item.answer">
              <div style="color:#303133;">{{ 'D：' + item.optionsD }}</div>
            </el-col>
            <el-col :span="24" v-else>
              <div style="color:#C0C4CC;  text-decoration: line-through;">
                {{ 'D：' + item.optionsD }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-tag type="success">{{ '正确答案：' + item.answer }}</el-tag>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>

    <el-pagination :current-page="page" :total="total" :page-size="limit" :page-sizes="[15, 30]"
      style="padding: 30px 0; " layout="->, total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
      @current-change="changeCurrentPage" />
  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        str: null,
        list: null,
        total: 0,
        page: 1,
        limit: 15
      }
    },
    created() {
      this.fetchData()
    },

    methods: {
      fetchData() {
        if (!this.str) {
          return
        }

        axios.get("http://localhost/subject/listPage/" + this.page + "/" + this.limit + "/" + this.str).then(
          response => {
            this.list = response.data.data.pageModel.records
            this.total = response.data.data.pageModel.total
          })

        this.$refs.jujiao.focus()
        this.$refs.jujiao.select()
      },

      chgo() {
        this.fetchData()
      },
      ingo() {
        this.fetchData()
      },

      changePageSize(size) {
        this.limit = size
        this.fetchData()
      },

      changeCurrentPage(page) {
        this.page = page
        this.fetchData()
      },

      resetData() {
        this.str = null
      }
    }
  })
</script>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 100%;
  }

  .el-row {
    margin-bottom: 10px;
  }

  .btm {
    margin-top: 10px;
  }
</style>

</html>